import { View, Form, Input, Button, Text, Image } from '@tarojs/components'
import { useState, useRef } from 'react'
import Taro from '@tarojs/taro'
import { ui } from '../../utils/platform'
import { useAuth } from '../../contexts/AuthContext'
import './index.less'

// 假设使用相同的头像
import avatarImg from '../../assets/login/Screenshot_2025-07-07-10-17-18-773_com.larus.nova.jpg'
import logoImg from '../../assets/logo.jpg'

export default function Register() {
  const [name, setName] = useState('')
  const [password, setPassword] = useState('')
  const [confirmPassword, setConfirmPassword] = useState('')
  const [formError, setFormError] = useState('')
  
  // 使用Auth Context
  const { isLoading, register, login } = useAuth()
  
  // 使用ref来跟踪组件是否已挂载
  const isMounted = useRef(true)

  // 组件挂载/卸载处理
  Taro.useDidShow(() => {
    isMounted.current = true
  })
  
  Taro.useDidHide(() => {
    isMounted.current = false
  })

  // 密码强度验证函数
  const validatePassword = (password) => {
    // 检查密码长度
    if (password.length < 6) {
      return '密码至少需要6位字符'
    }
    
    // 检查密码组成
    const hasNumber = /\d/.test(password)
    const hasLetter = /[a-zA-Z]/.test(password)
    const hasSymbol = /[^a-zA-Z0-9]/.test(password)
    
    const typeCount = [hasNumber, hasLetter, hasSymbol].filter(Boolean).length
    
    if (typeCount < 2) {
      return '密码需要包含数字、字母、符号中的至少2种'
    }
    
    return null
  }

  const handleSubmit = async () => {
    if (!name || !password || !confirmPassword) {
      setFormError('请填写所有必填项')
      return
    }
    
    // 验证密码强度
    const passwordError = validatePassword(password)
    if (passwordError) {
      setFormError(passwordError)
      return
    }
    
    if (password !== confirmPassword) {
      setFormError('两次密码输入不一致')
      return
    }
    
    // 清除之前的错误
    setFormError('')
    
    try {
      // 调用Context的register方法
      const result = await register(name, password)
      
      // 检查注册结果
      if (result.success) {
        // 注册成功处理
        if (isMounted.current) {
          console.log('注册成功')
          
          ui.showToast({
            title: '注册成功',
            icon: 'success',
            duration: 1500
          })
          
          // 注册成功后等待一段时间，确保系统状态已更新
          await new Promise(resolve => setTimeout(resolve, 300))
          
          // 然后自动登录
          try {
            console.log('注册成功，准备自动登录')
            const loginResult = await login(name, password)
            console.log('自动登录结果:', loginResult)
            
            if (loginResult.success) {
              console.log('自动登录成功')
              
              // 登录成功后等待一段时间，确保token已保存
              await new Promise(resolve => setTimeout(resolve, 200))
              
              // 然后跳转到registerStep页面完善信息
              setTimeout(() => {
                if (isMounted.current) {
                  ui.navigateTo({
                    url: '/pages/register/registerStep/index'
                  })
                }
              }, 1000)
            } else {
              console.error('自动登录失败:', loginResult.message)
              // 如果自动登录失败，仍然跳转到登录页
              setTimeout(() => {
                if (isMounted.current) {
                  Taro.navigateBack()
                }
              }, 1000)
            }
          } catch (loginErr) {
            console.error('自动登录异常:', loginErr)
            // 如果自动登录异常，仍然跳转到登录页
            setTimeout(() => {
              if (isMounted.current) {
                Taro.navigateBack()
              }
            }, 1000)
          }
        }
      } else {
        // 注册失败处理
        if (isMounted.current) {
          console.error('注册失败:', result)
          console.log('错误详情 - status:', result.status, 'message:', result.message, 'data:', result.data)
          
          // 优先使用后端返回的具体错误信息
          let errorMessage = '注册失败，请重试'
          
          // 检查状态码409（用户名已存在）
          if (result.status === 409) {
            errorMessage = '用户名已存在'
          }
          // 从result中获取错误信息
          else if (result.message) {
            errorMessage = result.message
          } else if (result.data && result.data.message) {
            errorMessage = result.data.message
          }
          
          console.log('最终错误信息:', errorMessage)
          setFormError(errorMessage)
          
          ui.showToast({
            title: errorMessage,
            icon: 'error',
            duration: 2000
          })
        }
      }
    } catch (err) {
      // 网络错误或其他异常
      if (isMounted.current) {
        console.error('注册过程发生错误:', err)
        console.log('异常详情 - status:', err.status, 'message:', err.message, 'data:', err.data)
        
        // 优先使用后端返回的具体错误信息
        let errorMessage = '注册失败，请重试'
        
        // 检查状态码409（用户名已存在）
        if (err.status === 409) {
          errorMessage = '用户名已存在'
        }
        // 从error对象中获取错误信息
        else if (err.message) {
          errorMessage = err.message
        } else if (err.data && err.data.message) {
          errorMessage = err.data.message
        }
        
        console.log('最终错误信息:', errorMessage)
        setFormError(errorMessage)
        
        ui.showToast({
          title: errorMessage,
          icon: 'error',
          duration: 2000
        })
      }
    }
  }

  // 返回登录页
  const handleBack = () => {
    Taro.navigateBack()
  }

  return (
    <View className='register-container'>
      <View className='logo-container'>
        <Image 
          className='logo-image'
          src={logoImg} 
          mode='aspectFit'
        />
      </View>
      
      <View className='back-button-container'>
        <View className='back-button' onClick={handleBack}>返回</View>
      </View>
      
      <View className='register-header'>
        <Text className='register-title'>用户注册</Text>
      </View>
      
      <View className='avatar-container'>
        <Image 
          className='avatar-image'
          src={avatarImg} 
          mode='aspectFill'
        />
      </View>
      
      <Form className='register-form' onSubmit={handleSubmit}>
        <View className='form-item'>
          <Input
            className='input'
            name='name'
            placeholder='请输入用户名'
            value={name}
            onInput={e => setName(e.detail.value)}
          />
        </View>
        
        <View className='form-item'>
          <Input
            className='input'
            name='password'
            placeholder='请输入密码（至少6位，包含数字、字母、符号中的至少2种）'
            password
            value={password}
            onInput={e => setPassword(e.detail.value)}
          />
        </View>
        
        <View className='form-item'>
          <Input
            className='input'
            name='confirmPassword'
            placeholder='请确认密码'
            password
            value={confirmPassword}
            onInput={e => setConfirmPassword(e.detail.value)}
          />
        </View>
        
        {formError && <Text className='error-message'>{formError}</Text>}
        
        <Button 
          className='register-button' 
          formType='submit'
          loading={isLoading}
          disabled={isLoading}
        >
          {isLoading ? '注册中...' : '注册'}
        </Button>
      </Form>
    </View>
  )
}